<template>
    <div class="manycard_box" id="manycard">
        <div class="manycard_left">
            <div>
                <div class="kazhong">
                    <div class="lable">选择卡种：</div>
                    <el-select v-model="selected1" :class="{'grey':selected1 == ''}" placeholder="请选择">
                        <el-option v-for="item in option1" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </div>
                <div class="mianzhi">
                    <div class="lable">选择面额：</div>
                    <el-select v-model="selected2" :class="{'grey':selected2 == ''}" placeholder="请选择">
                        <el-option v-for="item in option2" :key="item.value" :label="item.label" :value="item.label"></el-option>
                    </el-select>
                </div>
            </div>
            <div>
                <div class="zhekou">
                    <div class="lable">供货折扣：</div>
                    <el-input placeholder="请输入供货折扣" type="number" v-model="input1" :class="{'grey':input1 == ''}" clearable></el-input>
                    <div class="zhekoufont">折</div>
                </div>
            </div>
            <div class="kahao_pwd">
                <p>卡号/密码：<span class="tishi">(请输入卡号和密码，卡号和密码必须一一对应，按下Tab键自动切换输入框)</span></p>
                <div class="input_box border">
                    <div class="title">
                        <div>卡号</div>
                        <div>密码</div>
                    </div>
                    <ul id="kahao_pwd">
                        <li v-for="(item,index) in arr" :key="index" :class="{'bg' : index%2 != 0}">
                            <el-input ref="cardInput" placeholder='请输入卡号' type="number" :id="'x'+index" v-model="item.input1" :class="{'grey':item.input1 == ''}" clearable></el-input>
                            <el-input ref="pwdInput" placeholder='请输入密码' type="number" :id="'y'+index" v-model="item.input2" :class="{'grey':item.input2 == ''}" clearable></el-input>
                             <!-- @blur="changNum2(item.input2,item)" -->
                              <!-- @blur="changNum1(item.input1,item)" -->
                        </li>
                    </ul>
                </div>
                <p>已经输入了<span class="yellow">{{liNum}}</span>张面值<span class="yellow">{{money}}</span>元的卡，还可以输入<span class="yellow" v-text="surplus"></span>张。</p>
            </div>
            <div class="commit">
                <el-button class="submmit" @click="commitInfo" :disabled="isDisabled">确认提交</el-button>
                <el-button class="addBtn" @click="addInput" icon="el-icon-plus">添加</el-button>
            </div>
            <div class="prompt">
                <div>
                    <img src="../../../../assets/i.png" alt="">
                    <span>温馨提示</span>
                </div>
                <p>1.请精准填写所供卡号与密码相对应且真实有效，否则可能导致无法结算，给您带来损失。</p>
                <p>2.全国话费充值卡可指定省份消耗，请精确选择销卡地区，以免给您带来不必要的损失。</p>
                <p>3.所有充值卡默认消耗时间为7天，您也可随时查看销卡动态。</p>
            </div>
        </div>
    </div>
</template>

<script>
    import Public from '../../../../until/public';
    import { getValue, manyCard } from '@/until/getData';
    export default {
		data() {
			return {
                selected1: '4',              // 卡种
                selected2: '',              // 面额
                input1:'',                  // 供卡折扣
                faceValue: [],              // 面值數組
                kazhong: '中国石化',
                option1: [
                    {value: '4',label: '中国石化'}
                ],
                option2: [],
                money: 0,
                liNum: 0,                     // li的数量
                arr:[{
                    id: '1',
                    input1: '',
                    input2: ''
                }],
                isDisabled: false
            }
        },
        mounted () {
            let data = {
                operator: '4'
            }
            this.getWorth(data);
        },
        computed: {
            surplus: function() {               // 计算剩余可添加的行数
                let surplu = 0;
                surplu = 1000 - (this.liNum);
                return surplu;
            }
        },
        watch: {
            arr(curVal,oldVal){
                this.$nextTick(() => {      
                    let container = this.$el.querySelector("#kahao_pwd");
                    container.scrollTop = container.scrollHeight;
                });
            },
            selected2(){
                this.money = this.selected2;
            },
            selected1(){
                let data = {};
                if (this.selected1 === '4') {
                    data.operator = '4';
                    this.option2 = [];
                    this.selected2 = '';
                    this.getWorth(data);
                    this.kazhong = '中国石化';
                    this.$emit('cardType', '中国石化');
                } else if (this.selected1 === '5') {
                    data.operator = '5';
                    this.option2 = [];
                    this.selected2 = '';
                    this.getWorth(data);
                    this.kazhong = '中国石油';
                    this.$emit('cardType', '中国石油');
                }
            }
        },
        methods:{
            commitInfo(){
                let token = Public.getToken();
                if (this.selected1 == '') {
                    Public.topAlert('warning','请选择卡种');
                    return;
                } else if (this.selected2 == '') {
                    Public.topAlert('warning','请选择商品面值');
                    return;
                } else if (this.input1 == '') {
                    Public.topAlert('warning','请输入供卡折扣');
                    return;
                } else {
                    this.isDisabled = true;
                    if (this.arr[0].input1 != '') {
                        let card_Pwd = this.arr;
                        let str = '';
                        let card = [];
                        let pwd = [];
                        for (let i = 0; i < card_Pwd.length; i++) {
                            if ((card_Pwd[i].input1 == '')||(card_Pwd[i].input2 == '')) {
                                card_Pwd.splice(card_Pwd.indexOf(card_Pwd[i]), 1);
                                continue;
                            }
                        }
                        card_Pwd.forEach((item) => {
                            card.push(Public.encrypt(item.input1, token));
                            pwd.push(Public.encrypt(item.input2, token));
                        });
                        this.faceValue.forEach((item) => {
                            if (this.selected2 === item.worth) {
                                let height;
                                let low;
                                if (item.discount_high.length == '3' && item.discount_low.length == '3') {
                                    low = (eval(item.discount_high)/100).toFixed(3);
                                    height = (eval(item.discount_low)/100).toFixed(3);
                                } else if (item.discount_high.length == '4' && item.discount_low.length == '4') {
                                    low = (eval(item.discount_high)/1000).toFixed(3);
                                    height = (eval(item.discount_low)/1000).toFixed(3);
                                } else if (item.discount_high.length == '3' && item.discount_low.length == '4') {
                                    low = (eval(item.discount_high)/100).toFixed(3);
                                    height = (eval(item.discount_low)/1000).toFixed(3);
                                } else if (item.discount_high.length == '4' && item.discount_low.length == '3') {
                                    low = (eval(item.discount_high)/1000).toFixed(3);
                                    height = (eval(item.discount_low)/100).toFixed(3);
                                }
                                if (eval(this.input1) >= eval(low) && eval(height) >= eval(this.input1)) {
                                    let token = Public.getToken();
                                    let data = {
                                        card_code: card,
                                        card_psd: pwd,
                                        worth: Public.encrypt(this.selected2, token),
                                        discount: Public.encrypt(String(Math.ceil((this.input1-0)*100)), token),
                                        card_type: this.selected1,
                                        area: '全国'
                                    };
                                    const h = this.$createElement;
                                    this.$msgbox({
                                        title: '消息提示',
                                        message: h('div', null, [
                                            h('p', {style: 'line-height: 25px'}, '您本次提交的供卡信息如下：（请仔细核对）'),
                                            h('p', {style: 'line-height: 20px'}, [
                                                h('span',null,'卡种：'),
                                                h('span',{style: 'color: red'},this.kazhong)
                                            ]),
                                            h('p', {style: 'line-height: 20px'}, [
                                                h('span',null,'面额：'),
                                                h('span',{style: 'color: red'},this.selected2+'元')
                                            ]),
                                            h('p', {style: 'line-height: 20px'}, [
                                                h('span',null,'供卡数量：'),
                                                h('span',{style: 'color: red'},card_Pwd.length+'张')
                                            ]),
                                            h('p', {style: 'line-height: 20px'}, [
                                                h('span',null,'供货折扣：'),
                                                h('span',{style: 'color: red'},this.input1)
                                            ])
                                        ]),
                                        showCancelButton: false,
                                        confirmButtonText: '确定',
                                        customClass: 'ConfirmManyCardInfoMessage'
                                    }).then(action => {
                                        manyCard(data).then((res) => {
                                            // console.log(res);
                                            if (res.code == '1') {
                                                Public.topAlert('success',res.msg);
                                            } else {
                                                Public.topAlert('error',res.msg);
                                            }
                                        }).catch((err) => {
                                            // console.log(err);
                                        });
                                    }).catch(action => {
                                        Public.topAlert('error','取消操作');
                                    });
                                } else {
                                    Public.topAlert('warning','您输入的折扣不符合规则');
                                }
                            }
                        });
                        setTimeout(() => {
                            this.isDisabled = false;
                        }, 1000);
                    }
                }
            },
            addInput(){
                if (this.arr.length < 1000) {
                    let flag = false;
                    let InputArr1 = this.$refs.cardInput;
                    InputArr1.forEach((item1,index) => {
                        if (item1.value == '') {
                            let msg = '请把第'+ (index+1) +'行卡号填写完整，再添加新的信息！';
                            this.publicAlert(msg,item1);
                            flag = true;
                            return;
                        } else {
                            let InputArr2 = this.$refs.pwdInput;
                            InputArr2.forEach((item2,index) => {
                                if (item2.value == '') {
                                    let msg = '请把第'+ (index+1) +'行密码填写完整，再添加新的信息！';
                                    this.publicAlert(msg,item2);
                                    flag = true;
                                    return;
                                } else {
                                    flag = false;
                                    return;
                                }
                            });
                        }
                    });
                    setTimeout(() => {
                        if (!flag) {
                            let len = this.arr.length + 1;
                            let obj = {
                                id: len,
                                input1: '',
                                input2: ''
                            }
                            this.arr.push(obj);
                        }
                    }, 300);
                } else {
                    this.$confirm('最多只能添加1000条', '警告提示', {
                        confirmButtonText: '确定',
                        showCancelButton: false,
                        type: 'warning'
                    }).then(() => {
                        
                    }).catch(() => {

                    });
                }
            },
            changNum(input2){
                if (input2 != '') {
                    this.liNum = this.arr.length;
                }
            },
            publicAlert(msg,item){
                this.$confirm(msg, '消息提示', {
                    confirmButtonText: '确定',
                    showCancelButton: false,
                    type: 'warning',
                    confirmButtonClass: 'lackInfoSure',
                    customClass: 'lackInfo',
                }).then(() => {
                    item.focus();
                }).catch(() => {
                    item.focus();
                });
            },
            confirm(){
                Public.topAlert('success','提交成功');
                setTimeout(() => {
                    this.$router.push({
                        name: 'fuelconfim'
                    });
                }, 2000);
            },
            cancel(){
                Public.topAlert('error','取消操作');
            },
            changNum1(input1,item){
                if (this.arr.length > 1) {
                    if (input1 == '') {
                        this.arr.forEach(items => {
                            if (items.input1 == input1) {
                                this.arr.splice(this.arr.indexOf(items),1);
                                this.liNum = this.arr.length;
                            }
                        });
                    }
                }
            },
            changNum2(input2,item){
                if (this.arr.length > 1) {
                    if (input2 == '') {
                        this.arr.forEach(items => {
                            if (items.input2 == input2) {
                                this.arr.splice(this.arr.indexOf(items),1);
                                this.liNum = this.arr.length;
                            }
                        });
                    } else{
                        this.liNum = this.arr.length;
                    }
                } else{
                    if (input2 != '') {
                        this.liNum = this.arr.length;
                    }
                }
            },
            getWorth(data){
                getValue(data).then((res) => {
                    // console.log(res);
                    if (res.code == '1') {
                        this.option2 = [];
                        res.msg.forEach((item, index) => {
                            let obj = {
                                value: index+1,
                                label: item.worth
                            }
                            this.option2.push(obj);
                        });
                        this.faceValue = res.msg;
                        this.$emit('discount', res.msg);
                    }
                }).catch((err) => {
                    // console.log(err);
                });
            }
        }
    }
</script>
<style scoped>
    .manycard_box{
        width: 613px;
        height: 563px;
    }
    .manycard_box .manycard_left{
        width: 613px;
        height: 100%;
    }
    .manycard_box .manycard_left>div{
        padding-top: 21px;
        display: flex;
    }
    .manycard_box .manycard_left .kazhong,
    .manycard_box .manycard_left .mianzhi,
    .manycard_box .manycard_left .zhekou,
    .manycard_box .manycard_left .diqu{
        display: flex;
    }
    .manycard_box .manycard_left .mianzhi{
        margin-left: 55px;
    }
    .manycard_box .manycard_left .diqu{
        margin-left: 25px;
    }
    .lable{
        line-height: 40px;
        width: 80px;
        text-align: right; 
    }
    .zhekoufont{
        width: 20px;
        line-height: 40px;
        padding-left: 10px;
    }
    .manycard_box .manycard_left .kahao_pwd{
        display: block;
    }
    .kahao_pwd p:last-child{
        font-size: 14px;
        padding-top: 5px;
    }
    #kahao_pwd{
        width: 100%;
        height: 162px;
        overflow-y:scroll;
    }
    #kahao_pwd::-webkit-scrollbar{
        display: none;
    }
    #kahao_pwd li{
        float: left;
        padding-left: 4px;
    }
    .input_box{
        width: 572px;
        height: 201px;
        margin-top: 5px;
    }
    .input_box .title{
        width: 100%;
        height: 40px;
    }
    .input_box .title div{
        width: 50%;
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-size: 14px;
        float: left;
        background-color: #fafafa;
    }
    .manycard_box .manycard_left .prompt{
        display: block;
        padding-top: 10px;
    }
    .prompt img{
        width: 17px;
        height: 17px;
        vertical-align: top;
        margin-right: 5px;
        margin-top: 3px;
    }
    .prompt span{
        color: #8a63e7;
    }
    .prompt p{
        font-size: 14px;
        line-height: 25px;
    }
    .prompt div{
        margin-bottom: 10px;
    }
    .yellow{
        color: red;
    }
    .manycard_box .manycard_left .commit{
        padding-top: 10px;
    }
    .tishi{
        font-size: 14px;
        color: #a5a5a5;
    }
    .submmit.el-button.el-button--default{
        width: 120px;
        height: 38px;
        background-color: #8a63e7;
        color: white;
        padding: 0;
    }
    .submmit.el-button.el-button--default:hover{
        border-color: #8a63e7;
    }
    .el-button.addBtn.el-button--default{
        width: 120px;
        height: 38px;
        padding: 0;
        color: #8a63e7;
        border-color: #8a63e7;
    }
    .el-button.addBtn.el-button--default:hover{
        color: #8a63e7;
        border-color: #8a63e7;
    }
</style>
